<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性操作</title>
    <script src="/static/jQuery-1.11/jquery-1.11.3.min.js"></script>
    <style type="text/css">
        .other {
            background-color: orange;
            font-size: 20px;
        }
        .myBtn{
            background-color: red;
        }
    </style>
    <script>
        $(function () {
            // 获取属性值
            $("#getAttr").click(function () {
                console.log($("#btn").attr("type"))
            });
            // 设置属性值
            $("#setAttr").click(function () {
                console.log($("#btn").attr("type","text"))
            });
            // 添加CSS
            $("#addClass").click(function () {
               $("#btn").addClass("other")
            });
            // 删除CSS
            $("#removeClass").click(function () {
                $("#btn").removeClass("other")
            });
            // 轮换CSS
            $("#toggleClass").click(function () {
                $("#btn").toggleClass("other")
            });
            // 判断CSS
            $("#hasClass").click(function () {
                console.log($("#btn").hasClass("other"))
            })
        })

    </script>

</head>
<body>
<input id="btn" type="button" value="点我"/>
<form>
    <fieldset>
        <legend>属性操作</legend>
        <input type="button" value="获取属性值" id="getAttr"/>
        <input type="button" value="设置属性值" id="setAttr"/>
    </fieldset>
</form>
<form>
    <fieldset>
        <legend>CSS 操作</legend>
        <input type="button" value="添加CSS" id="addClass"/>
        <input type="button" value="删除CSS" id="removeClass"/>
        <input type="button" value="轮换CSS" id="toggleClass"/>
        <input type="button" value="判断CSS" id="hasClass"/>
    </fieldset>
</form>
<input type="checkbox" value="1" checked name="gender" id="gender" dataoption='{"name" : "蒋干"}'
       style="color: red; background: aqua" class="myBtn other" > 男
<script>
    $(function () {
        // css 方法针对 style 属性
        console.log($("#gender").css("color"))
    });
    $(function () {
        // val 方法针对 value 属性
        console.log($("#gender").val())
    });
    // addClass 方法、removeClass 方法，针对 class 属性
    $(function () {
       console.log( $("#gender").removeClass("other"));
        console.log( $("#gender").addClass("other"))
    });
    // prop 方法针对 checked 属性 selected 属性
    $(function () {
        console.log($("#gender").prop("checked"))
    })
    // data 方法，针对 data- 开头的属性的获取，若值是 JSON 格式, 自动转成 JS 对象
    $(function () {
        console.log($("#gender").data("dataoption"))
    })

</script>

</body>
</html>